import React, { Component } from 'react';
import { connect } from 'dva';
import {
    Form, Input, Select, Button, Radio, DatePicker, Checkbox, Row, Col, message, Modal
} from 'antd';
import * as ajax from "../../../services/api";
import moment from 'moment';
import './less/report.less';
import Drawer from 'react-motion-drawer';

const FormItem = Form.Item;
const { Option } = Select;

const confirm = Modal.confirm;

const dateFormat = 'YYYY-MM-DD';

@connect(state => ({
    profile: state.profile,
}))

@Form.create()

export default class AssOverseasDetails extends Component {
    constructor(props, context) {
        super(props, context);
        this.state = {
            open2: this.props.visible,
            loading: false,
            overseaManageId: this.props.overseaManageId,//传过来的方案id
            nationality: [],
            manageList: [],
            securityRange: [],
            securityRangeContentArrays: [],//安保范围数组
            overseasList: {
                nationality: '',
                recordPoliceName: '',
                recordDate: '',
                startDate: '',
                endDate: '',
                securityRange: [],
                securityRangeContentArrays: [],
                manageMode: '',
            },
            fan: false,
        }
    }
    componentWillReceiveProps(props) {
        this.setState({ open2: props.visible, overseaManageId: props.overseaManageId }, () => {
            console.log(this.state.open, this.state.overseaManageId)
        });
        this.renderOverseas();
        this.renderNation();
        this.renderMode();
        this.securityRangeList();
    }
    componentDidMount() {
        this.props.onRef(this);
        // this.renderOverseas();
        // this.renderNation();
        // this.renderMode();
        // this.securityRangeList();
    }

    renderMode = () => {
        ajax.getDictInformation({ codeTypes: 'manageMode' }).then((data) => {
            if (data.data) {
                this.setState({
                    manageList: data.data.manageMode,
                });
            }
        })
    };
    //重置表单
    resetFrom = () => {
        const { setFieldsValue } = this.props.form;
        setFieldsValue({
            nationality: '',
            recordPoliceName: '',
            recordDate: null,
            startDate: null,
            endDate: '',
            securityRange: [],
            securityRangeContentArrays: [],
            manageMode: '',
        });
    }
    securityRangeList = () => {
        ajax.getDictInformation({ codeTypes: 'securityRange' }).then((data) => {
            if (data.data) {
                this.setState({
                    securityRange: data.data.securityRange,
                });
            }
        })
    };

    renderOverseas = () => {
        if (this.state.overseaManageId !== '00') {
            ajax.comStockGetOverseaManageById({
                overseaManageId: this.state.overseaManageId
            }).then((data) => {
                console.log('获取海外经营信息', data, data);
                this.setState({
                    overseasList: data.data,
                });
            });
        }
    };

    renderNation = () => {
        //国籍选择
        ajax.getDictInformation({ codeTypes: 'nationality' }).then((data) => {
            //判断获取数据是否为空
            console.log('国籍：' + data);
            if (data.data) {
                this.setState({
                    nationality: data.data.nationality,
                });
            }
        });
    };

    //国家下拉选择值
    renderNationality = () => {
        return this.state.nationality.map((val, key) => {
            return <Option key={key} value={val.codeValue + ""}>{val.label}</Option>;
        });
    };

    //国家选中值
    handleChangeNation = (value) => {
        console.log(`selected ${value}`);
        this.setState({
            nation: value,
        });
    };


    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (!err) {
                console.log('values', values);
                values.recordDate = values['recordDate'].format('YYYY-MM-DD');
                values.startDate = values['startDate'].format('YYYY-MM-DD');
                values.endDate = values['endDate'].format('YYYY-MM-DD');
                values.securityRangeContentArrays = values.securityRange;
                // values.comId = this.state.comId;
                if (this.state.crossManageId !== '00') {
                    values.overseaManageId = this.state.overseaManageId;
                }
                const d1 = new Date(values.startDate.replace(/\-/g, "\/"));
                const d2 = new Date(values.recordDate.replace(/\-/g, "\/"));
                const d3 = new Date(values.endDate.replace(/\-/g, "\/"));
                if (d1 < d2) {
                    message.error('海外经营开始日期不能早于备案日期');
                } else if (d3 < d1) {
                    message.error('经营结束日期不能早于经营开始日期');
                } else {
                    this.setState({ loading: true });
                    ajax.stockSubmitComStockSaveOverseaManage({ ...values }).then((data) => {
                        // console.log('提交成功');
                        // message.success('海外经营详情保存成功！');
                        this.setState({
                            fan: true,
                            loading: false
                        }, () => {
                            this.props.close();
                        });
                    }, (err) => {
                        this.setState({ loading: false });
                    });
                }
            }
        });
    };
    callback = (key) => {
        console.log(key);
    };
    onChangeCheck = (checkedValues) => {
        console.log('checked = ', checkedValues);
    };

    //经营模式选择
    manageMode = () => {
        return this.state.manageList.map((val, key) => {
            return <Option key={key} value={val.codeValue + ""}>{val.label}</Option>;
        });
    };

    //安保范围选择
    renderList = () => {
        return this.state.securityRange.map((val, key) => {
            return <Col key={key} span={8} style={{ marginTop: '5px' }}><Checkbox value={val.codeValue + ""}>{val.label}</Checkbox></Col>
        });
    };

    fan = () => {
        let _that = this;
        if (_that.state.fan) {
            // _that.props.history.push(`/enterprise/reported`);
            _that.props.close();
        } else {
            confirm({
                title: '当前信息未保存，是否确认返回？',
                okText: '确认',
                cancelText: '取消',
                onOk() {
                    // _that.props.history.push(`/enterprise/reported`);
                    // _that.props.close();
                    _that.setState({
                        open2: false
                    });
                },
                onCancel() {
                    console.log('Cancel');
                },
            });
        }
    };

    render() {
        const { submitting } = this.props;
        const { getFieldDecorator } = this.props.form;


        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 7 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 12 },
                md: { span: 10 },
            },
        };

        const submitFormLayout = {
            wrapperCol: {
                xs: { span: 24, offset: 0 },
                sm: { span: 10, offset: 7 },
            },
        };

        return (
            <Drawer
                overlayColor="rgba(0, 0, 0,0)"
                right
                open={this.state.open2}
                noTouchClose
                width={600}
                zIndex={2}
                className="drawer-box"
                onChange={(open) => {
                    this.props.onChange(open);
                    this.setState({ open });
                }}
            >
              <h3 style={{"fontSize":'22px',"padding":"18px",'borderBottom':'1px solid #dedede'}}>新增记录</h3>
                <Form
                    onSubmit={this.handleSubmit}
                    style={{ marginTop: 32 }}
                ><FormItem
                    {...formItemLayout}
                    label="涉外经营国别"
                >
                        {getFieldDecorator('nationality', {
                            initialValue: this.state.overseasList.nationality,
                            rules: [{ required: true, message: '请选择涉外经营国别' }],
                        })(
                            <Select placeholder="请选择"
                                style={{ width: '100%' }} onChange={this.handleChangeNation}
                                showSearch
                                optionFilterProp="children"
                                filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                            >
                                <Option value="">请选择</Option>
                                {this.renderNationality()}
                            </Select>
                        )}
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="备案公安机关名称"
                    >
                        {getFieldDecorator('recordPoliceName', {
                            initialValue: this.state.overseasList.recordPoliceName,
                            rules: [{
                                required: true, message: '请输入备案公安机关名称',
                            }, {
                                pattern: /^[\u4E00-\u9FA5\（\）]{1,20}$/,
                                message: "请输入中文最大长度20"
                            }],
                        })(
                            <Input placeholder="请输入" maxLength="20" />
                        )}
                    </FormItem>
                    {this.state.overseaManageId === '00' ? <FormItem
                        {...formItemLayout}
                        label="备案日期"
                    >
                        {getFieldDecorator('recordDate', {
                            rules: [{
                                required: true, message: '请选择备案日期',
                            }],
                        })(
                            <DatePicker style={{ width: '100%' }} />
                        )}
                    </FormItem> : <FormItem
                        {...formItemLayout}
                        label="备案日期"
                    >
                            {getFieldDecorator('recordDate', {
                                initialValue: moment(this.state.overseasList.recordDate, dateFormat),
                                rules: [{
                                    required: true, message: '请选择备案日期',
                                }],
                            })(
                                <DatePicker style={{ width: '100%' }} />
                            )}
                        </FormItem>}
                    {this.state.overseaManageId === '00' ? <FormItem
                        {...formItemLayout}
                        label="海外经营开始日期"
                    >
                        {getFieldDecorator('startDate', {
                            rules: [{
                                required: true, message: '请选择海外经营开始日期',
                            }],
                        })(
                            <DatePicker style={{ width: '100%' }} />
                        )}
                    </FormItem> : <FormItem
                        {...formItemLayout}
                        label="海外经营开始日期"
                    >
                            {getFieldDecorator('startDate', {
                                initialValue: moment(this.state.overseasList.startDate, dateFormat),
                                rules: [{
                                    required: true, message: '请选择海外经营开始日期',
                                }],
                            })(
                                <DatePicker style={{ width: '100%' }} />
                            )}
                        </FormItem>}
                    {this.state.overseaManageId === '00' ? <FormItem
                        {...formItemLayout}
                        label="海外经营结束日期"
                    >
                        {getFieldDecorator('endDate', {
                            rules: [{
                                required: true, message: '请选择海外经营结束日期',
                            }],
                        })(
                            <DatePicker style={{ width: '100%' }} />
                        )}
                    </FormItem> : <FormItem
                        {...formItemLayout}
                        label="海外经营结束日期"
                    >
                            {getFieldDecorator('endDate', {
                                initialValue: moment(this.state.overseasList.endDate, dateFormat),
                                rules: [{
                                    required: true, message: '请选择海外经营结束日期',
                                }],
                            })(
                                <DatePicker style={{ width: '100%' }} />
                            )}
                        </FormItem>}
                    <FormItem
                        {...formItemLayout}
                        label="安保范围"
                    >
                        {getFieldDecorator('securityRange', {
                            initialValue: this.state.overseasList.securityRangeContentArrays,
                            rules: [{
                                required: true, message: '请选择',
                            }],
                        })(
                            <Checkbox.Group onChange={this.onChangeCheck}>
                                <Row>
                                    {this.renderList()}
                                </Row>
                            </Checkbox.Group>
                        )}
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="经营模式"
                    >
                        {getFieldDecorator('manageMode', {
                            initialValue: this.state.overseasList.manageMode,
                            rules: [{ required: true, message: '请选择经营模式' }],
                        })(
                            <Select placeholder="请选择" onChange={this.handleChangeMode}>
                                <Option value="">请选择</Option>
                                {this.manageMode()}
                            </Select>
                        )}
                    </FormItem>
                    <FormItem {...submitFormLayout} style={{ marginTop: 32 }}>
                        <Button loading={submitting} onClick={this.fan}>
                            返回
          </Button>
                        <Button type="primary" style={{ marginLeft: 8 }} htmlType="submit" loading={this.state.loading}>提交</Button>
                    </FormItem>
                </Form>
            </Drawer>
        );
    }
}
